<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 通知管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            label-width="70px"
        >
          <el-form-item label="专业">
            <el-select
                v-model="query.majorId"
                filterable
                placeholder="请选择专业"
                @focus="getMajor()"
            >
              <el-option
                  v-for="item in optionsMajors"
                  :key="item.sid"
                  :label="item.majorName"
                  :value="item.sid"
                  :disabled="item.adviserId==query.adviserId ? false:true"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级">
            <el-select
                v-model="query.className"
                filterable
                placeholder="请选择班级"
                @focus="getClassList()"
                style="width: 80%"
            >
              <el-option
                  v-for="item in classList"
                  :key="item.className"
                  :label="item.className"
                  :value="item.className"
                  :disabled="item.adviserId==query.adviserId ? false:true"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="通知时间">
            <div class="block">
              <el-date-picker
                  v-model="query.createTime"
                  type="date"
                  placeholder="选择一个日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"

              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="学生姓名">
            <el-input
                v-model="query.studentName"
                placeholder="姓名"
                class="inline-input"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleSearch"
            >搜索
            </el-button>
          </el-form-item>

        </el-form>
      </div>
      <div class="clist">
        <div><i class="el-icon-s-data"></i>通知信息列表</div>
      </div>
      <el-table
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
      >
        <el-table-column
            :show-overflow-tooltip="true"
            :prop="item.prop"
            :label="item.label"
            v-for="item in props"
            :key="item.prop"
        >
        </el-table-column>
        <el-table-column label="级别">
          <template #default="scope">
            <el-radio-group v-model="scope.row.level">
              <el-radio :label="3" v-if="scope.row.level===3">一级</el-radio>
              <el-radio :label="2" v-if="scope.row.level===2">二级</el-radio>
              <el-radio :label="1" v-if="scope.row.level===1">三级</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column>
          <el-table-column
              label="操作"
              width="180"
              align="center"
              fixed="right"
          >
            <template #default="scope">
              <el-button
                  type="text"
                  icon="el-icon-view"
                  @click="look(scope.row.content)"
              >查看
              </el-button>
              <el-button
                  type="text"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.row)"
              >编辑
              </el-button>
              <el-button
                  type="text"
                  icon="el-icon-delete"
                  class="red"
                  @click="handleDelete(scope.$index, scope.row.sid)"
              >删除
              </el-button
              >
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            :currentPage="query.pageNum"
            :page-sizes="[10, 20, 40]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageTotal"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
    </div>
    <div>
      <el-dialog title="通告内容" v-model="vis" width="50%">
        <el-card>
          <div v-html="content"></div>
        </el-card>
      </el-dialog>
    </div>

    <div>
      <el-dialog title="信息通告" v-model="editVisible" width="50%">
        <el-form :model="entity" label-width="100px">
          <el-form-item label="通告标题">
            <el-input v-model="entity.title" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="通告优先级:" prop="type">
            <div>
              <el-radio-group v-model="entity.level">
                <el-radio :label="3">一级</el-radio>
                <el-radio :label="2">二级</el-radio>
                <el-radio :label="1">三级</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item label="通告标题">
            <div id="div1"></div>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="editVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {ref, reactive, nextTick} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRoute, useRouter} from "vue-router";
import request from "../../utils/request";
import E from "wangeditor";

export default {
  name: "Announcements",
  setup() {
    const root = "/bulletin/";
    const router = useRouter();
    const route = useRoute();
    const props = [
      {label: "学生姓名", prop: "studentName"},
      {label: "学号", prop: "studentId"},
      // {label: "学院名称", prop: "collegeName"},
      {label: "专业名", prop: "majorName"},
      {label: "班级名称", prop: "className"},
      {label: "通告标题", prop: "title"},
      // {label: "通告内容", prop: "content"},
      // {label: "级别", prop: "level"},
      {label: "通知时间", prop: "createTime"},
    ];

    const query = reactive({
      majorId: "",
      className: "",
      studentId: "",
      createTime: "",
      adviserId: localStorage.getItem("sid"),
      pageNum: 1,
      pageSize: 10,
    });
    const tableData = ref([]);
    const pageTotal = ref(0);
    // 获取表格数据
    // if (route.query.studentId) {
    //   query.studentId=route.query.studentId
    //   query.adviserId = localStorage.getItem("sid")
    //   request
    //       .get(root + "queryBulletinStudent", {
    //         params: query,
    //       })
    //       .then((res) => {
    //         if (res.code == 18) {
    //           ElMessage.warning(res.msg);
    //           tableData.value = []
    //         } else {
    //           tableData.value = res.data.records;
    //           pageTotal.value = res.data.total;
    //         }
    //       });
    // }
    const getData = () => {
      query.adviserId = localStorage.getItem("sid")
      request
          .get(root + "queryBulletinStudent", {
            params: query,
          })
          .then((res) => {
            if (res.code == 18) {
              ElMessage.warning(res.msg);
              tableData.value = []
            } else {
              tableData.value = res.data.records;
              pageTotal.value = res.data.total;
            }
          });
    };
    getData();

    // 查询操作
    const handleSearch = () => {
      query.pageNum = 1;
      getData();
    };
    // 分页大小
    const handleSizeChange = (val) => {
      query.pageSize = val;
      getData();
    };
    // 分页导航
    const handlePageChange = (val) => {
      query.pageNum = val;
      getData();
    };

    // 删除操作
    const handleDelete = (index, sid) => {
      // 二次确认删除
      ElMessageBox.confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
          .then(() => {
            request.delete(root + sid).then((res) => {
              if (res.data) {
                ElMessage.success("删除成功");
                tableData.value.splice(index, 1);
              } else {
                ElMessage.error("删除失败");
              }
            });
          })
          .catch(() => {
          });
    };

    // 新增操作
    const handleAdd = () => {
      // router.push("/admin/addCollege");
    };

    // 表格编辑时弹窗和保存
    const editVisible = ref(false);
    const entity = ref({
      content: "",
      title: "",
      level: 0,
      sid: ""
    })
    let editor
    const handleEdit = (row) => {
      // entity.value = JSON.parse(JSON.stringify(row))
      entity.value.title = row.title
      entity.value.sid = row.sid
      entity.value.level = row.level
      console.log(row.level)
      entity.value.content = JSON.parse(JSON.stringify(row.content))
      editVisible.value = true
      nextTick(() => {
        // 关联弹窗里面的div，new一个 editor对象
        // 关联弹窗里面的div，new一个 editor对象
        if (!editor) {
          editor = new E('#div1')
          // 配置 server 接口地址
          editor.config.uploadImgServer = 'http://localhost:9998/files/editor/upload'
          editor.config.uploadFileName = "file"  // 设置上传参数名称
          editor.create()
        }
        editor.txt.html(row.content)
      })
    }
    const save = () => {
      entity.value.content = editor.txt.html()
      if (!entity.value.sid) {
        ElMessage.info("sid空");
        return;
      }
      request.put("/bulletin", entity.value).then(res => {
        console.log(res)
        if (res.code === "0") {
          ElMessage.success("更新成功")
        } else {
          ElMessage.error(res.msg)
        }
        getData()// 刷新表格的数据
        editVisible.value = false  // 关闭弹窗
      })
    }
    //专业下拉框
    const optionsMajors = ref([]);
    const getMajor = () => {
      request
          .get("/major/queryList", {
            params: {type: 1},
          })
          .then((res) => {
            optionsMajors.value = res.data;
          });
    };
    //班级下拉框
    const classList = ref([]);
    const getClassList = () => {
      request
          .get("/class/byMajorIdOrCollegeId", {
            params: {majorId: query.majorId},
          })
          .then((res) => {
            classList.value = res.data;
          });
    };
    const content = ref("")
    const vis = ref(false)
    const look = (c) => {
      content.value = c
      vis.value = true
    }
    return {
      props,
      query, content, vis, look,
      tableData,
      pageTotal,
      editVisible,
      entity, editor,
      optionsMajors,
      classList,
      getClassList, save,
      getMajor,
      handleSearch,
      handleSizeChange,
      handlePageChange,
      handleAdd,
      handleDelete,
      handleEdit,
    };
  },
};
</script>

<style scoped>
.clist {
  background: #3ca2e0;
  height: 50px;
  font-size: 25px;
  display: flex;
  align-items: center;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
